<template>
  <div class="conten">
    <el-card class="sccard">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"

      >
      <div class="title">成 绩 录 入</div>
        <el-form-item class="elinput" label="姓名:" prop="name">
          <el-input class="input" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item class="elinput" label="课程:" prop="course">
          <el-input class="input" v-model="ruleForm.course"></el-input>
        </el-form-item>
        <el-form-item class="elinput" label="年级:" prop="grade">
          <el-input class="input" v-model="ruleForm.grade"></el-input>
        </el-form-item>
        <el-form-item class="elinput" label="班级:" prop="class">
          <el-input class="input" v-model="ruleForm.class"></el-input>
        </el-form-item>
        <el-form-item class="elinput" label="学期:" prop="semester">
          <el-input class="input" v-model="ruleForm.semester"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-plus" class="button" type="primary" @click="submitForm('ruleForm')"
            >添加</el-button
          >
          <el-button icon="el-icon-tickets" class="button" type="primary" @click="excel()">Excel导入</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入教师姓名",
          },
        ],
         course: [
          {
            required: true,
            trigger: "blur",
            message: "请输入课程",
          },
        ],
         grade: [
          {
            required: true,
            trigger: "blur",
            message: "请输入年级",
          },
        ],
         class: [
          {
            required: true,
            trigger: "blur",
            message: "请输入班级",
          },
        ],
        semester: [
          {
            required: true,
            trigger: "blur",
            message: "请输入学期",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
         this.$message.success("你点击了添加");
    },
    excel() {
         this.$message.success("你点击了Excel导入");
    },
  },
};
</script>

<style>
.sccard{
 display: flex;
 justify-content: center;
 text-align: center;
 padding-bottom: 20px;
}
.button{
    float: left;
    margin-top: 10px;
}
.elinput{
  width: 500px;
}
.demo-ruleForm >.el-form-item > .el-form-item__label{
  font-weight: bolder !important;
  font-size: 25px;
}
.title{
  font-size: 50px;
  font-weight: bolder;
  height: 120px;
  padding-top: 20px;
}
</style>
